<template>
  <view>
    <customtop top_title="群发布"></customtop>
    <view class="container">
      <view class="top_alert" v-if="!result">
        <u-alert type="warning" description="请提前准备好群二维码和群人数截图"></u-alert>
      </view>
      <form class="luckform" @submit="formSubmit" v-if="!result">
        <view class="items">
          <view class="item weui-cell">
            <view class="weui-cell__hd">
              <view class="weui-label">群名字<span class="span_required">*</span></view>
            </view>
            <view class="weui-cell__bd">
              <input name="name" class="weui-input" type="text" placeholder="请输入群名字" value="" />
            </view>
          </view>
          <view class="item weui-cell">
            <view class="weui-cell__hd">
              <view class="weui-label">群人数<span class="span_required">*</span></view>
            </view>
            <view class="weui-cell__bd">
              <input name="number" class="weui-input" type="text" placeholder="请输入群人数" value="" />
            </view>
          </view>
          <view class="item weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after">
            <view class="weui-cell__hd">
              <view class="weui-label">群类型<span class="span_required">*</span></view>
            </view>
            <view class="weui-cell__bd" @click="onPickerShow_type">
              {{type ? type : '请选择'}}
              <input hidden="true" name="type" :value="type" />
            </view>
          </view>
        </view>

        <view class="items">
          <view class="top">
            <span class="title">群二维码</span><span class="span_required">*</span><span class="span_remark">请上传群二维码</span>
          </view>
          <view class="weui-cell">
            <view class="weui-cell__bd">
              <view>
                <u-upload
                  :fileList="fileList_qrcode"
                  @afterRead="afterRead_images"
                  @delete="delete_images"
                  name="qrcode"
                  :maxCount="1"
                />
              </view>
            </view>
          </view>
        </view>

        <view class="items">
          <view class="top">
            <span class="title">群人数截图</span><span class="span_required">*</span><span class="span_remark">请上传群人数截图</span>
          </view>
          <view class="weui-cell">
            <view class="weui-cell__bd">
              <view>
                <u-upload
                  :fileList="fileList_number_jietu"
                  @afterRead="afterRead_images"
                  @delete="delete_images"
                  name="number_jietu"
                  :maxCount="1"
                />
              </view>
            </view>
          </view>
        </view>

        <view class="items custom_checkbox">
          <view class="top">
            <span class="title">群分类</span><span class="span_required">*</span><span class="span_remark">请选择群分类</span>
          </view>
          <view class="item weui-cell" v-if="qun_categorys.length > 0">
            <view class="box">
              <span
                v-for="(item, index) in qun_categorys"
                :key="index"
                @click="setCheckbox_category(item.id)"
                :class="category_ids.indexOf(item.id) > -1 ? 'on' : ''"
              >
                {{item.name}}
              </span>
            </view>
          </view>
        </view>

        <view class="btnbox">
          <button class="luckbtn luckbtn-default" formType="submit">提交信息</button>
        </view>
      </form>

      <view class="result" v-if="result">
        <view class="txt"><span class="u_icon"><u-icon name="checkmark-circle" color="" size="" /></span>发布成功，审核后即可显示~</view>
        <view class="btns">
          <button class="luckbtn luckbtn-default" @click="createAfterReturn">返回上一页</button>
        </view>
      </view>
    </view>

    <u-picker
      :show="pickerShow_type"
      :columns="pickerColumns_type"
      keyName="label"
      @confirm="onPickerConfirm_type"
      @close="onPickerClose_type"
      @cancel="onPickerClose_type"
      :closeOnClickOverlay="true"
    >
    </u-picker>
  </view>
</template>

<script>
import { request, upload } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      qun_categorys: [],
      category_ids: [],
      fileList_qrcode: [],
      qrcode: '',
      fileList_number_jietu: [],
      number_jietu: '',
      result: false,
      type: '',
      pickerColumns_type: [['个人群', '企业群']],
      pickerShow_type: false
    }
  },

  onLoad(options) {
    uni.showLoading();
    request.post('/qun/getCategorys').then(res => {
      uni.hideLoading();
      this.qun_categorys = res.data;
    })
  },

  methods: {
    formSubmit: function(e) {
      uni.showLoading();
      let params = e.detail.value;
      params.qrcode = this.qrcode;
      params.number_jietu = this.number_jietu;
      params.category_ids = JSON.stringify(this.category_ids);
      request.post('/qun/store', params).then(res => {
        uni.hideLoading();
        if (res.code == 200) {
          this.result = true;
          // 通知来源页
          var pages = getCurrentPages(); var prevPage = pages[pages.length - 2];
          if (prevPage.$vm.createAfter != undefined) prevPage.$vm.createAfter(params.id, params);
        } else if (res.code == 400) {
          uni.showToast({ title: res.message, icon: 'none' });
        }
      })
    },

    onPickerShow_type: function() {
      this.pickerShow_type = true;
    },

    onPickerClose_type: function() {
      this.pickerShow_type = false;
    },

    onPickerConfirm_type: function(e) {
      this.type = e.value[0];
      this.pickerShow_type = false;
    },

    setCheckbox_category: function(value) {
      let index = this.category_ids.indexOf(value);
      if (index < 0) {
        if (this.category_ids.length > 2) {
          uni.showToast({title: '最多只能选择三个', icon: 'none'});
          return false;
        }
        this.category_ids.push(value);
      } else {
        this.category_ids.splice(index, 1);
      }
    },

    afterRead_images: function(event) {
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList_${event.name}`].length;
      lists.map((item) => {
        this[`fileList_${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })

      for (let i = 0; i < lists.length; i++) {
        upload(lists[i].url).then(res => {
          let item = this[`fileList_${event.name}`][fileListLen];
          this[`fileList_${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            id: 0,
            url: res.data.url
          }))
          this[`${event.name}`] = res.data.url
          fileListLen++
        });
      }
    },

    delete_images: function(event) {
      this[`fileList_${event.name}`].splice(event.index, 1);
      this[`${event.name}`] = '';
    },

    createAfterReturn: function() {
      uni.navigateBack({ delta: 1 });
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
page {
  padding-bottom: 60rpx;
}
.top_alert {
  margin-top: 30rpx;
}
.luckform .items {
  margin-top: 30rpx;
}
.luckform .btnbox {
  margin-top: 50rpx;
}

.result {
	text-align: center;
	padding: 60rpx;
}
.result .txt {
	letter-spacing: 2px;
}
.result .txt .icon {
	margin-right: 8rpx;
}
.result .description {
	margin-top: 20rpx;
	color: #999;
	font-size: 24rpx;
}
.result .btns {
	margin-top: 30rpx;
}
.result .btns .btn {
	margin-left: 10rpx;
}
.result .btns .btn:first-child {
	margin-left: 0;
}
</style>
